<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>导航菜单</title>
</head>

<body>
    <div class="header">
        <div class="">
            <div class=""></div>
        </div>
    </div>
    <div class="maodian">
        <ul class="navA" id="daohang">
            <li><a class="navA" href="" target="_parent">新闻中心</a>
                <ul class="navB">
                    <div class="navB">
                        <li><a href=""><i>综合新闻</i></a></li>
                        <li><a href=""><i>研制发展</i></a></li>
                    </div>
                </ul>
            </li>
            <li><a class="navA" href="" target="_parent">关于工程</a>
                <ul class="navB">
                    <div class="navB">
                        <li><a href=""><i>工程简介</i></a></li>
                        <li><a href=""><i>系统组成</i></a></li>
                        <li><a href=""><i>组织管理</i></a></li>
                        <li><a href=""><i>工程文化</i></a></li>
                        <li><a href=""><i>知识产权</i></a></li>
                    </div>
                </ul>
            </li>

            <li><a class="navA" href="" target="_parent">官方公告</a>
                <ul class="navB">
                    <div class="navB">
                        <li><a href=""><i>中国空间站轨道参数</i></a></li>
                    </div>
                </ul>
            </li>
            <li><a class="navA" href="" target="_parent">飞行任务</a></li>

            <li><a class="navA" href="" target="_parent">空间科学</a>
                <ul class="navB">
                    <div class="navB">
                        <li><a href=""><i>空间科学研究与应用</i></a></li>
                        <li><a href=""><i>航天技术试验</i></a></li>
                        <li><a href=""><i>航天医学实验</i></a></li>
                        <li><a href=""><i>航天育种搭载实验</i></a></li>
                    </div>
                </ul>
            </li>
            <li><a class="navA" href="" target="_parent">国际合作</a></li>
            <li><a class="navA" href="" target="_parent">环球视野</a></li>
            <li><a class="navA" href="" target="_parent">专题报告</a></li>
            <li><a class="navA" href="" target="_parent">联系我们</a></li>
        </ul>
    </div>
    <style>
        ul {
            list-style-type: none;
            padding: 0;

        }

        .maodian {
            margin-left: 50px;
        }

        li a.navA {
            text-decoration: none;
            display: block;
            color: #39C5BB;
            text-align: center;
            padding: 16px 16px 16px 16px;
            font-size: 30px;
            font-weight: 700;
            font-family: 幼圆;
        }

        ul.navA {
            display: flex;
            position: fixed;
            width: 100%;
            font-size: 35px;
        }


        .navA li:hover a.navA {
            background-color: #66CCFF;
            border-bottom: 5px solid #003f88;
            opacity: 1;
            visibility: visible;
            transition: all 0.7s ease;
        }

        .navB {
            display: none;
            position: relative;
            left: 0;
            margin: 0 10px 20px 10px;
            border: 0 22px;
            text-align: center;
            background-color: pink;
            color: #39C5BB;
            font-size: 20px;
            overflow: hidden;
        }

        div.navB>li>a {
            color: #39C5BB;
            text-decoration: none;
            text-align: 20px;
        }

        li:hover .navB {
            display: block;
        }

        i {
            padding-bottom: 1px;
            border-bottom: 2px blue dashed;
        }
    </style>
</body>

</html>